<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Study</title>
    <style>
        .bg_img{
            position: fixed;
            top:0px;
            left:0px;
            bottom: 0px;
            right: 0px;
            background-image: url(img/login_bg.png);
            background-size:cover;
            text-align: center;
        }
        .top_img{
            margin-top:120px;
            width:372px;
            height:120px;
        }
        .login_bg{
            background-color: white;
            border-radius:3%;
            top:260px;
            width: 450px;
            height: 316px;
            margin:0 auto;
        }
        .admin{
            display: block;
            border-radius:3%;
            border:0.8px solid rgba(211,220,230,1);
            background:rgba(245,246,250,1);
            margin-top:2px;
            margin-left:46px;
            width: 360px;
            height: 42px;

        }

        .login{
            display: block;
            border-radius:3%;
            background:rgba(0,199,212,1);
            margin: 26px auto auto auto;
            width: 80%;
            height: 14%;
            color:rgba(255,255,255,1);
            font-size: 12px;
        }

        .text{
            padding-top:36px;
            padding-left:46px;
            height: 20px;
            width: 42px;
            font-family:PingFangSC-Regular;
            font-size: 14px;
            color: #666666;
        }
        .text2{
            padding-top:24px;
            padding-left:46px;
            height: 20px;
            width: 28px;
            font-family:PingFangSC-Regular;
            font-size: 14px;
            color: #666666;
        }
        .wrong {
            visibility: hidden;
            padding-top:2px;
            padding-left:46px;
            height: 17px;
            width: 140px;
            font-family:PingFangSC-Regular;
            font-size: 14px;
            color: #ff4949;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            color:    #cccccc;
            font-size: 12px;
        }
    </style>
</head>
<body>
<script type="text/javascript">

function showMsg(admin,password){
    // alert(admin+password);
    document.getElementById("wrong").style.visibility ="visible";//隐藏
    document.getElementById("password").style.outline ="2px solid #ff4949";//隐藏

}
</script>

<div class="bg_img">
    <img class="top_img" src="img/ic_name.png"/>

    <div class="login_bg">
        <div class="text">用户名</div>
        <input id="admin" class="admin" type="text" placeholder="  请输入您的用户名">
        <div class="text2">密码</div>
        <input id="password" class="admin" type="text" placeholder="  请输入您的密码">
        <div id="wrong" class="wrong">*密码错误,请重新输入</div>
        <input class="login" type="submit" value="登录" onclick="showMsg(document.getElementById('admin').value,document.getElementById('password').value)">
    </div>
</div>

</body>
</html>